﻿<div style="display: flex; flex-direction: column; gap: 0.5rem;">
    <FluentSwitch @bind-Value=value1 AriaLabel="No label"></FluentSwitch>
    <FluentSwitch @bind-Value=value2 Label=" Dark Mode" />
    <FluentSwitch @bind-Value=@value3 Label="New Feature">
        <span slot="checked-message">On</span>
        <span slot="unchecked-message">Off</span>
    </FluentSwitch>
    <FluentSwitch @bind-Value=value4 Label="Theme">
        <span slot="checked-message">Dark</span>
        <span slot="unchecked-message">Light</span>
    </FluentSwitch>
</div>

<p>New feature: @value3</p>

@code {
    bool value1, value2, value3=true, value4;

}